<div class="backing-service back-jia-service" style="background:#fff;padding:20px 40px 40px;">
    <div class="loader" ng-show="!market">
        <div class="loader-inner ball-clip-rotate-multiple">
            <div></div>
            <div></div>
        </div>
    </div>
    <div ng-show="market">
        <uib-tabset class="tab-default tab-back-jia-default" active="check">
            <uib-tab index="1" style="width:auto;">
                <uib-tab-heading style="width:468px">
                    <i class="fa2 fa2-bs"></i>&nbsp;&nbsp;后端服务市场
                </uib-tab-heading>
                <div class="tabs" style='padding-left:30px;position: relative;'>
                    <div class='col-mb-1' style='margin-right: 20px;'>
                        <label>服务分类</label>
                    </div>

                    <div class="sc col-mb-11" style='position: relative;top: -30px;left: 89px;width: 92%;'>
                        <div class="btn-group ft col-mb-1" ng-repeat='item in cation' style='margin-bottom: 8px;'>
                            <label class="btn" ng-class='{"active":marketclass.serviceCat == $index}'
                                   ng-click='select("serviceCat", $index)'>{{item}}</label>
                        </div>
                    </div>
                    <div class="sc col-mb-12 pull-left">
                        <label>服务提供者</label>
                        <div class="btn-group fw" ng-repeat='item in providers'>
                            <label class="btn" ng-class="{'active':marketclass.vendor == $index}"
                                   ng-click="selectsc('vendor',$index)">{{item}}</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="input-group col-sm-4 searchbar" style="float:left;margin-top:28px;margin-bottom:32px;margin-left:46px;">
                        <input type="text"
                               class="form-control"
                               placeholder="搜索后端服务名称"
                               ng-keyup=marsearch($event)
                               ng-model="grid.txt">
                        <!--ng-model="txt" ng-focus="showTip=true;" -->
                    <span class="input-group-btn" id=inputa>
                        <a class="btn" ng-click="marsearch('search')"></a>
                    </span>
                    </div>
                </div>

                <div class='change' ng-repeat='items in market' style="margin-left:46px;margin-right:46px;">
                    <div class="row">
                        <div class="h2-border" ng-show="items.item.length"
                             style="margin-bottom: 15px;">
                            <span class='biaoti'>{{items.name}}</span>
                            <i class='xian'></i>
                        </div>
                        <!--<h2 id=t{{items.id}} class="h2-border" ng-show="items.showTab"-->
                        <!--style="margin-bottom: 15px;">-->
                        <!--{{items.name}}</h2>-->
                        <div class="row">
                            <div class="fen"
                                 ng-repeat="item in items.item">
                                <bs-card></bs-card>
                            </div>
                        </div>
                    </div>
                </div>

            </uib-tab>

            <uib-tab index="2" style="width:auto;">
                <uib-tab-heading style="white-space:nowrap;">
                    <i class="fa2 fa2-bsi"></i>&nbsp;&nbsp;已申请的后端服务实例
                </uib-tab-heading>
                <div class="tabs row" style='padding-left: 46px;position: relative;'>
                    <div class='col-mb-1' style='margin-right: 20px;'>
                        <label>服务分类</label>
                    </div>

                    <div class="sc col-mb-11" style='position: relative;top: -30px;left: 89px;width: 92%;'>
                        <div class="btn-group ft col-mb-1" ng-repeat='item in cation' style='margin-bottom: 8px;'>
                            <label class="btn" ng-class='{"active":mymarketclass.serviceCat == $index}'
                                   ng-click='myselect("serviceCat", $index)'>{{item}}</label>
                        </div>
                    </div>
                    <div class="sc col-mb-12 pull-left">
                        <label>服务提供者</label>
                        <div class="btn-group fw" ng-repeat='item in providers'>
                            <label class="btn" ng-class="{'active':mymarketclass.vendor == $index}"
                                   ng-click="myselectsc('vendor',$index)">{{item}}</label>
                        </div>
                    </div>
                </div>
                <div class="row" style='margin: 0;'>
                    <div class="input-group col-sm-4 searchbar" style="margin-bottom:20px;margin-left:31px;">
                        <input type="text"
                               class="form-control"
                               placeholder="搜索后端服务名称"
                               ng-keyup=mysearch($event)
                               ng-model="grid.mytxt">
                        <!--ng-model="txt" ng-focus="showTip=true;" -->
                    <span class="input-group-btn" id=input>
                        <a class="btn" ng-click="mysearch('search')"></a>
                    </span>
                    </div>
                </div>

                <div ng-include="'views/backing_service/backing_service_instance.html'" style="margin-left:31px;margin-right:31px;">

                </div>
            </uib-tab>

            <uib-tab index="3" style="width:auto;">
                <uib-tab-heading style="white-space:nowrap;">
                    <i class="fa2 diy_service"></i>&nbsp;&nbsp;自定义后端服务实例
                </uib-tab-heading>

                <div class="backing_jia_btn" style='margin-bottom: 20px;margin-left:-15px;'>
                    <div class="col-sm-4 backing_jia_col">
                        <a class="btn btn-green" style="margin-right: 20px; "
                           ui-sref="console.create_saas">
                            <i class="fa fa-plus fa-lg"></i>
                            <span class="hidden-xs">新建</span>
                        </a>
                    </div>
                    <div class="input-group col-sm-4 col-sm-offset-8 searchbar">
                        <input type="text"
                               class="form-control"
                               placeholder="搜索后端服务名称"
                               ng-keyup=mykeysearch($event)
                               ng-model="grid.mydivtxt">
                        <!--ng-model="txt" ng-focus="showTip=true;" -->
                    <span class="input-group-btn" id=inputb>
                        <a class="btn" ng-click="mydiysearch()"></a>
                    </span>
                    </div>
                </div>
                <div ng-include="'views/backing_service/backing_service_custom.html'">
                </div>

            </uib-tab>

            <uib-tab index="4" ng-if="false" style="width:auto;">
                <uib-tab-heading style="white-space:nowrap;">
                    <i class="fa2 data_service"></i>&nbsp;&nbsp;数据集成服务实例
                </uib-tab-heading>

                <div class="row backing_jia_btn" style='margin-bottom: 20px;'>
                    <div class="col-sm-4">
                        <!--<a class="btn btn-green" style="margin-right: 20px; "-->
                        <!--ui-sref="console.create_saas">-->

                        <!--<i class="fa fa-plus fa-lg"></i>-->
                        <!--<span class="hidden-xs">新建</span>-->
                        <!--</a>-->
                    </div>
                    <div class="input-group col-sm-4 col-sm-offset-8 searchbar">
                        <input type="text"
                               class="form-control"
                               placeholder="搜索后端服务名称"
                               ng-keyup=inekeysearch($event)
                               ng-model="grid.myinetxt">
                        <!--ng-model="txt" ng-focus="showTip=true;" -->
                    <span class="input-group-btn" id=inputb>
                        <a class="btn" ng-click="inekeysearch('search')"></a>
                    </span>
                    </div>
                </div>
                <div ng-include="'views/backing_service/backing_service_integration.html'">
                </div>
            </uib-tab>
        </uib-tabset>
    </div>

</div>
<!--[if !IE]><!-->
<script>
    // 针对IE10
    if (/*@cc_on!@*/false) {
        document.documentElement.className += ' ie' + document.documentMode;
    }
    // 针对IE11及非IE浏览器，
    // 因为IE11下document.documentMode为11，所以html标签上会加ie11样式类；
    // 而非IE浏览器的document.documentMode为undefined，所以html标签上会加ieundefined样式类。
    if (/*@cc_on!@*/true) {
        document.documentElement.className += ' ie' + document.documentMode;
    }
</script>
<!--<![endif]-->
<style type="text/css">
    .ie11 #inputa {
        top: 9px;
    }
</style>

<style>
    .h2-border::after {
        content: '';
        border-bottom: none;
    }

    .h2-border {
        height: 30px;
        line-height: 30px;
        position: relative;
    }

    .h2-border .xian {
        /*float: left;*/
        display: inline-block;
        border-bottom: 1px solid #c9c9c9;
        width: 100%;
        /*margin-bottom: 5px;*/
        position: absolute;
        top: 50%;
        display:none;
    }

    .h2-border .biaoti {
        float: left;
        display: inline-block;
        padding-right: 15px;
        position: relative;
        left: 0;
        top: 0;
        z-index: 2;
    }

    .fen {
        float: left;
        width: 25%;
        padding: 0 15px;
    }

    .btn.active, .btn:active {
        box-shadow: none;
        -webkit-box-shadow: none;
    }

    .backing-service .sc .btn {
        /*width: 85px;*/
    }

    .fw:last-child .btn {
        /*width: 85px;*/
    }
    .back-jia-service .tab-content{border:none;}
    .tab-back-jia-default .tab-content{border:0;padding:30px 0;}
    .tab-back-jia-default li.active .nav-link, .tab-back-jia-default li.active .nav-link:focus, .tab-back-jia-default li.active .nav-link:hover{
        border:0;border-bottom:2px solid #5c72e9;color:#333;
    }

    /*#t0:after {*/
    /*left: 75px;*/
    /*}*/
    /*#t4:after {*/
    /*left: 80px;*/
    /*}*/


</style>
